A jump menu is a pop-up menu of options that link to and open files in a browser window. You'll create a jump menu that allows a customer to quickly jump from the products index page to specific product pages in the Scaal site.
Before you create the jump menu, preview the completed page.
1 | In the Site window, double-click the icon for the products_index.html file to open it. |
2 | Press F12 to preview the page in the browser.
![]() |
3 | Click the arrow to the right of the Select a Product pop-up menu to display the product selection menu. Select a product to view. |
4 | When you have finished viewing the files, close the browser window. |
5 | Close the products_index file. |
![]() |
The jump menu you create will contain a selection prompt to inform viewers of options. You'll also create two menu commands that link to product pages.
1 | In the Site window, double-click the icon for the DW3_products_index.html file to open it. |
2 | Select and delete the text "insert jump menu here." |
3 | With the insertion point in the table cell, choose Insert > Form Object > Jump Menu. |
The Insert Jump Menu dialog box appears.
![]() |
|
4 | In the Text field, type Select a product. |
This text prompts a viewer to take action. | |
5 | Under Options, select the Select First Item After URL Change option. |
This sets the first entry in a menu as the item to which the menu returns after a user selects an option in the jump menu. | |
6 | Click the plus (+) button to add another jump menu item. |
7 | In the Text field, type Compact disc. |
8 | In the When Selected, Go To URL field, click Browse and navigate to DW3_products_cd.html. Click Select (Windows) or Choose (Macintosh) to select the file you want to open when the item is selected. |
9 | Click the plus (+) button to add one more jump menu item. |
10 | In the Text field, type Coffee mug. Then click Browse and navigate to DW3_products_mug.html. Click Select (Windows) or Choose (Macintosh) to select the file you want to open when the item is selected. |
Your Insert Jump Menu dialog box should look similar to the screen below.
![]() |
|
11 | Click OK to close the dialog box. |
12 | Save your document. |
The jump menu doesn't work in the Document window; you must preview it in a browser to test your links. | |
![]() |